<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
      <title>好味道</title>
      <link rel="icon" href="./images/favicon.ico">
    <!--不同屏幕尺寸根字体设置-->
    <script src="./js/base.js"></script>
    <!--element-ui的样式-->
    <link rel="stylesheet" href="../backend/plugins/element-ui/index.css" />
    <!--引入vant样式-->
    <link rel="stylesheet" href="styles/vant.min.css"/>
    <!-- 引入样式  -->
    <link rel="stylesheet" href="styles/index.css" />
    <!--本页面内容的样式-->
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>

  <div id="main" class="app">
<!--      //返回按钮、搜索按钮-->
      <div class="divHead">
          <span  @click="backbtn" class="el-icon-arrow-left"></span>
        <img class="imgs" src="./images/user.png" @click="toUserPage"/>
          <span>
              <span class="el-icon-lightning one"></span>
              <span @click="serchbtns" class="el-icon-search two"></span>
          </span>
      </div>


      <div class="divTitle">
        <div class="divStatic">
          <img src="./images/logo.jpg"  class="logo"/>
          <div class="divDesc">
            <div class="divName">好味道餐厅</div>
            <div class="divSend">
                <span><img src="./images/time.png"/> 距离1.5km</span>
                <span><img src="./images/money.png"/> 配送费6元</span>
                <span><img src="./images/location.png"/> 预计时长12min</span>
            </div>
          </div>
        </div>

        <div class="divDesc">
          简介: 好味道餐厅是好味道点餐的独立的品牌，定位“大众 化的美食外送餐饮”，旨为顾客打造专业美食。
        </div>

      </div>


      <div class="divBody">
        <div class="divType">
          <ul>
            <li v-for="(item,index) in categoryList" :key="index" @click="categoryClick(index,item.id,item.type)" :class="{active:activeType === index}">{{item.name}}</li>
          </ul>
        </div>
        <div class="divMenu">
          <div>
            <div class="divItem" v-for="(item,index) in dishList" :key="index" @click="dishDetails(item)">
              <el-image :src="imgPathConvert(item.image)" >
                <div slot="error" class="image-slot">
                  <img src="./images/noImg.png"/>
                </div>
              </el-image>
              <div>
                <div class="divName">{{item.name}}</div>
                <div class="divDesc">{{item.description}}</div>
                <div class="divDesc">{{'月销' + (item.saleNum ? item.saleNum : 0)  }}</div>
                <div class="divBottom"><span>￥</span><span>{{item.price/100}}</span></div>
                <div class="divNum">
                  <div class="divSubtract" v-if="item.number > 0">
                    <img src="./images/subtract.png" @click.prevent.stop="subtractCart(item)"/>
                  </div>
                  <div class="divDishNum">{{item.number}}</div>
                  <div class="divTypes" v-if="item.flavors && item.flavors.length > 0 && !item.number " @click.prevent.stop="chooseFlavorClick(item)">选择规格</div>
                  <div class="divAdd" v-else>
                    <img src="./images/add.png" @click.prevent.stop="addCart(item)"/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

      <div class="divLayer">
        <div class="divLayerLeft"></div>
        <div class="divLayerRight"></div>
      </div>
      <div class="divCart" v-if="categoryList.length > 0">
          <div :class="{imgCartActive: cartData && cartData.length > 0, imgCart:!cartData || cartData.length<1}" @click="openCart"></div>
          <div :class="{divGoodsNum:1===1, moreGoods:cartData && cartData.length > 99}" v-if="cartData && cartData.length > 0">{{ goodsNum }}</div>
          <div class="divNum">
              <span>￥</span>
              <span>{{goodsPrice}}</span>
          </div>
          <div class="divPrice"></div>
          <div :class="{btnSubmitActive: cartData && cartData.length > 0, btnSubmit:!cartData || cartData.length<1}" @click="toAddOrderPage">去结算</div>
        </div>


<!--      口味选择-->
<!--      弹窗-->
      <van-dialog v-model="dialogFlavor.show" :show-confirm-button="false" class="dialogFlavor" ref="flavorDialog">
          <div class="dialogTitle">{{dialogFlavor.name}}</div>
          <div class="divContent">
            <div v-for="flavor in dialogFlavor.flavors" :key="flavor.id">
                <div class="divFlavorTitle">{{flavor.name}}</div>
                <span v-for="item in JSON.parse(flavor.value)" 
                :key="item"  
                @click="flavorClick(flavor,item)"
                :class="{spanActive:flavor.dishFlavor === item}"
                >{{item}}</span>
            </div>
          </div>
          <div class="divBottom">
            <div><span class="spanMoney">￥</span>{{dialogFlavor.price/100}}</div>
            <div @click="dialogFlavorAddCart">加入购物车</div>
          </div>
          <div  class="divFlavorClose" @click="dialogFlavor.show = false">
            <img src="./images/close.png"/>
          </div>

        </van-dialog>

      <van-popup v-model="cartDialogShow" position="bottom" :style="{ height: '50%' }" class="dialogCart">
          <div class="divCartTitle">
            <div class="title">购物车</div>
            <div class="clear" @click="clearCart">
              <i class="el-icon-delete"></i> 清空
            </div>
          </div>
          <div class="divCartContent">
            <div v-for="item in cartData" :key="item.id" class="divCartItem">
              <el-image :src="imgPathConvert(item.image)" >
                <div slot="error" class="image-slot">
                  <img src="./images/noImg.png"/>
                </div>
              </el-image>
              <div class="divDesc">
                <div class="name">{{item.name}}</div>
                <div class="price">
                  <span class="spanMoney">￥</span>{{item.amount}}</div>
              </div>
              <div class="divNum">
                <div class="divSubtract">
                  <img src="./images/subtract.png" @click="cartNumberSubtract(item)"/>
                </div>
                <div class="divDishNum">{{item.number}}</div>
                <div class="divAdd">
                  <img src="./images/add.png" @click="cartNumAdd(item)"/>
                </div>
              </div>
              <div class="divSplit"></div>
              </div>
          </div>
        </van-popup>

      <van-dialog v-model="detailsDialog.show"
                    :show-confirm-button="false" 
                    class="detailsDialog" 
                    ref="detailsDialog"
                    v-if="detailsDialog.show"
                    >
          <div class="divContainer">
            <el-image :src="imgPathConvert(detailsDialog.item.image)" >
              <div slot="error" class="image-slot">
                <img src="./images/noImg.png"/>
              </div>
            </el-image>
            <div class="title">{{detailsDialog.item.name}}</div>
            <div class="content">{{detailsDialog.item.description}}</div>
          </div>

          <div class="divNum">
            <div class="left">
              <span>￥</span><span>{{detailsDialog.item.price/100}}</span>
            </div>
            <div class="right">
                <div class="divDishNum">{{detailsDialog.item.number}}</div>
                <div class="divTypes" v-if="detailsDialog.item.flavors" @click ="chooseFlavorClick(detailsDialog.item)">选择规格</div>
                <div class="divAdd" v-else>
                  <img src="./images/add.png" @click="addCart(detailsDialog.item)"/>
                </div>
            </div>
          </div>
          <div class="detailsDialogClose" @click="detailsDialog.show = false">
            <img src="./images/close.png"/>
          </div>
      </van-dialog>

        //购物车界面
      <van-dialog v-model="setMealDialog.show"
                    :show-confirm-button="false" 
                    class="setMealDetailsDialog" 
                    ref="setMealDetailsDialogd"
                    v-if="setMealDialog.show"
        >
          <div class="divContainer">
            <div class="title">{{setMealDialog.item.name}}</div>
              <div class="item" v-for="(item,index) in setMealDialog.item.list" :key="index">
                <el-image :src="imgPathConvert(item.image)">
                  <div slot="error" class="image-slot">
                    <img src="./images/noImg.png"/>
                  </div>
                </el-image>
                <div class="divSubTitle">{{item.name + '(' + item.copies + '份)' }}
                  <div class="divPrice">
                    <span>￥</span><span>{{item.price/100}}</span>
                  </div>
                </div>                
                <div class="content">{{item.description}}</div>
              </div>
            </div>
          <div class="divNum">
              <div class="left">
                <span>￥</span><span>{{setMealDialog.item.price/100}}</span>
              </div>
              <div class="right">
                  <div class="divSubtract" v-if="setMealDialog.item.number > 0">
                    <img src="./images/subtract.png" @click="subtractCart(setMealDialog.item)"/>
                  </div>
                  <div class="divDishNum">{{setMealDialog.item.number}}</div>
                  <div class="divAdd" v-if="setMealDialog.item.number">
                    <img src="./images/add.png" @click="addCart(setMealDialog.item)"/>
                  </div>
                  <div class="addCart"  @click="addCart(setMealDialog.item)" v-if="!setMealDialog.item.number">加入购物车</div>
              </div>
          </div>
          <div class="detailsDialogClose" @click="setMealDialog.show = false">
            <img src="./images/close.png"/>
          </div>
        </van-dialog>
  </div>



        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="../backend/plugins/vue/vue.js"></script>
        <!-- 引入组件库 -->
        <script src="../backend/plugins/element-ui/index.js"></script>
        <!-- 引入vant样式 -->
        <script src="./js/vant.min.js"></script>
        <!-- 引入axios -->
        <script src="../backend/plugins/axios/axios.min.js"></script>
        <script src="./js/request.js"></script>
        <script src="./js/common.js"></script>
        <script src="./api/main.js"></script>
        <script src="./js/jquery-2.1.0.js"></script>


  <script>
      new Vue({
          el:'#main',
          data(){
              return {
                  fullscreenLoading: false,
                  //左边菜品类别index
                  activeType:0,
                  categoryList:[],
                  categoryId:undefined,
                  dishList:[],
                  cartData:[],

                  //口味
                  dialogFlavor:{
                      name:'',
                      flavors:[],
                      dishId:undefined,
                      price:undefined,
                      show:false,
                      image:''
                  },

                  cartDialogShow:false,
                  detailsDialog:{
                      show:false,
                      item:{image:''}
                  },
                  setMealDialog:{
                      show:false,
                      item:{}
                  },
              }
          },
          computed:{
              goodsNum(){
                  let num = 0
                  this.cartData.forEach(item=>{
                      num += item.number
                  })
                  if(num <99){
                      return num
                  }else{
                      return '99+'
                  }
              },
              goodsPrice(){
                  let price = 0
                  this.cartData.forEach(item=>{
                      price += (item.number * item.amount)
                  })
                  return price
              }
          },
          created(){
              //参数处理
          },
          watch:{
              'dialogFlavor.show'(flag){
                  if(flag){
                      document.querySelector('.divCart').style.zIndex = 1
                  }else{
                      document.querySelector('.divCart').style.zIndex = 3000
                  }
              },
          },
          mounted(){
              this.initData()


              var loc = location.href;//获取整个跳转地址内容，其实就是你传过来的整个地址字符串
              var arr=loc.split("=")
              window.onload=function (){
                  document.querySelector(".divType ul").children[arr[1]].click()
              }
          },
          methods:{
              openFullScreen1() {
                  this.fullscreenLoading = true;
                  // setTimeout(() => {
                  //
                  // }, 2000);
              },
              backbtn(){
                  document.location.href = './indexpro.html'
              },
              serchbtns(){
                  document.location.href = './page/dianpuSerch.html'
              },
              sousuobtn(){
                  console.log("添加")
                  document.location.href = './search'
              },
              //初始化数据
              initData(){
                  Promise.all([categoryListApi(),cartListApi({})]).then(res=>{
                      //获取分类数据
                      if(res[0].code === 1){
                          this.categoryList = res[0].data
                          this.fullscreenLoading = false;
                          if(Array.isArray(res[0].data) && res[0].data.length > 0){
                              this.categoryId = res[0].data[0].id
                              if(res[0].data[0].type === 1){
                                  this.getDishList()
                              }else{
                                  this.getSetmealData()
                              }
                          }

                      }else{
                          this.$notify({ type:'warning', message:res[0].msg});
                      }
                      //获取菜品数据
                      if(res[1].code === 1){
                          this.cartData = res[1].data
                      }else{
                          this.$notify({ type:'warning', message:res[1].msg});
                      }
                  })
              },
              //分类点击
              categoryClick(index,id,type){
                  this.activeType = index
                  this.categoryId = id
                  if(type === 1){//菜品
                      this.getDishList()
                  }else{
                      this.getSetmealData()
                  }
              },
              //获取菜品数据
              async getDishList(){
                  if(!this.categoryId){
                      return
                  }
                  const res = await dishListApi({categoryId:this.categoryId,status:1})
                  if(res.code === 1){
                      let dishList = res.data
                      const cartData  = this.cartData
                      if(dishList.length > 0 && cartData.length > 0){
                          dishList.forEach(dish=>{
                              cartData.forEach(cart=>{
                                  if(dish.id === cart.dishId){
                                      dish.number = cart.number
                                  }
                              })
                          })
                      }
                      this.dishList = dishList
                  }else{
                      this.$notify({ type:'warning', message:res.msg});
                  }
              },
              //获取套餐数据setmealId
              async getSetmealData(){
                  if(!this.categoryId){
                      return
                  }
                  const res = await setmealListApi({categoryId:this.categoryId,status:1})
                  if(res.code === 1){
                      let dishList = res.data
                      const cartData  = this.cartData
                      if(dishList.length > 0 && cartData.length > 0){
                          dishList.forEach(dish=>{
                              cartData.forEach(cart=>{
                                  if(dish.id === cart.setmealId){
                                      dish.number = cart.number
                                  }
                              })
                          })
                      }
                      this.dishList = dishList
                  }else{
                      this.$notify({ type:'warning', message:res.msg});
                  }
              },
              //获取购物车数据
              async getCartData(){
                  const res = await cartListApi({})
                  if(res.code === 1){
                      this.cartData = res.data
                  }else{
                      this.$notify({ type:'warning', message:res.msg});
                  }
              },
              //菜单中往购物车中添加商品
              async addCart(item){
                  let params = {
                      amount:item.price/100,//金额
                      dishFlavor:item.dishFlavor,//口味  如果没有传undefined
                      dishId:undefined,//菜品id
                      setmealId:undefined,//套餐id
                      name:item.name,
                      image:item.image
                  }
                  if(Array.isArray(item.flavors)){//表示是菜品
                      params.dishId = item.id
                  }else{//表示套餐 套餐没有口味
                      params.setmealId = item.id
                  }

                  const res = await addCartApi(params)

                  if(res.code === 1){
                      this.dishList.forEach(dish=>{
                          if(dish.id === item.id){
                              dish.number = res.data.number
                          }
                      })
                      if(this.setMealDialog.show){
                          item.number = res.data.number
                      }
                      this.getCartData()
                  }else{
                      this.$notify({ type:'warning', message:res.msg});
                  }
              },

              //菜单中减少选中的商品
              async subtractCart(item){
                  let params = {
                      dishId:item.id,
                  }
                  if(!Array.isArray(item.flavors)){
                      params = {
                          setmealId:item.id,
                      }
                  }
                  const res = await updateCartApi(params)
                  if(res.code === 1){
                      this.dishList.forEach(dish=>{
                          if(dish.id === item.id){
                              dish.number = (res.data.number === 0 ? undefined : res.data.number)
                          }
                      })
                      if(this.setMealDialog.show){
                          item.number = (res.data.number === 0 ? undefined : res.data.number)
                      }
                      this.getCartData()
                  }else{
                      this.$notify({ type:'warning', message:res.msg});
                  }
              },

              //展开购物车
              openCart(){
                  if(this.cartData.length > 0){
                      this.cartDialogShow = true
                  }
              },
              //购物车中增加商品数量
              async cartNumAdd(item){
                  let params = {
                      amount:item.amount,//金额
                      dishFlavor:item.dishFlavor,//口味  如果没有传undefined
                      dishId:item.dishId,//菜品id
                      setmealId:item.setmealId,//套餐id
                      name:item.name,
                      image:item.image
                  }
                  const res = await addCartApi(params)
                  if(res.code === 1){
                      this.dishList.forEach(dish=>{
                          if(dish.id === (item.dishId || item.setmealId)){
                              dish.number = res.data.number
                          }
                      })
                      console.log(this.dishList)
                      this.getCartData()
                  }else{
                      this.$notify({ type:'warning', message:res.msg});
                  }
              },
              //购物车中减少商品数量
              async cartNumberSubtract(item){
                  let params = {
                      dishId:item.dishId,
                      setmealId:item.setmealId,
                  }
                  const res = await updateCartApi(params)
                  if(res.code === 1){
                      this.dishList.forEach(dish=>{
                          if(dish.id === (item.dishId || item.setmealId)){
                              dish.number = (res.data.number === 0 ? undefined : res.data.number)
                          }
                      })
                      this.getCartData()
                  }else{
                      this.$notify({ type:'warning', message:res.msg});
                  }
              },

              //修改商品列表中的数据number
              changeDishList(item){
                  for(let ele of this.dishList){
                      if(ele.id === (item.setmealId || item.dishId)){
                          ele.number = item.number
                      }
                  }
              },

              //清空购物车
              async clearCart(){
                  const res = await clearCartApi()
                  if(res.code === 1){
                      for(let ele of this.dishList){
                          ele.number = undefined
                      }
                      this.cartData = []
                      this.cartDialogShow = false
                  }else{
                      this.$notify({ type:'warning', message:res.msg});
                  }
              },
              //点击选择规格
              chooseFlavorClick(item){
                  this.dialogFlavor = {
                      name:'',
                      flavors:[],
                      dishId:undefined,
                      price:undefined,
                      show:false
                  }
                  this.dialogFlavor={
                      name:item.name,
                      flavors:item.flavors,
                      dishId:item.id,
                      price:item.price,
                      show:true,
                      image:item.image
                  }
                  for(var i=0;i<this.dialogFlavor.flavors.length;i++){
                      let arr=JSON.parse(this.dialogFlavor.flavors[i].value)
                      this.dialogFlavor.flavors[i].dishFlavor=arr[0]
                  }
              },
              flavorClick(flavor,item){
                  flavor.dishFlavor = item
                  //强制刷新dialog的dom
                  this.dialogFlavor.show = false
                  this.dialogFlavor.show = true
              },

              //选择规格加入购物车
              dialogFlavorAddCart(){
                  const dialogFlavor = this.dialogFlavor
                  let flag = true
                  let dishFlavor = []
                  dialogFlavor.flavors.forEach(item=>{
                      if(item.dishFlavor){
                          dishFlavor.push(item.dishFlavor)
                      }else{
                          flag = false
                          Notify({ type: 'warning', message: '请选择'+ item.name });
                      }
                  })
                  if(flag){
                      this.addCart({
                          price:dialogFlavor.price,
                          dishFlavor:dishFlavor.join(","),
                          id:dialogFlavor.dishId,
                          flavors:[],
                          image:dialogFlavor.image,
                          name:dialogFlavor.name
                      })
                      this.dialogFlavor.show = false
                  }
              },
              //网络图片路径转换
              imgPathConvert(path){
                  return imgPath(path)
              },
              //跳转到去结算界面
              toAddOrderPage(){
                  if(this.cartData.length > 0){
                      window.requestAnimationFrame(()=>{
                          window.location.href ='/front/page/add-order.html'
                      })
                  }
              },
              toUserPage(){
                  window.requestAnimationFrame(()=>{
                      window.location.href= '/front/page/user.html'
                  })
              },
              async dishDetails(item){
                  //先清除对象数据，如果不行的话dialog使用v-if
                  this.detailsDialog.item = {}
                  this.setMealDialog.item = {}
                  if(Array.isArray(item.flavors)){
                      this.detailsDialog.item = item
                      this.detailsDialog.show = true
                  }else{
                      //显示套餐的数据
                      const res = await setMealDishDetailsApi(item.id)
                      if(res.code === 1){
                          this.setMealDialog.item = {...item,list:res.data}
                          this.setMealDialog.show = true
                      }else{
                          this.$notify({ type:'warning', message:res.msg});
                      }
                  }

              }

          }
      })
  </script>
  </body>
</html>


